<template>
    <el-card>
        <div class="box">
            <div class="short"></div>
            <div>团队管理</div>
        </div>
        <div class="tab-container">
            <el-tabs class="demo-tabs">
                <el-tab-pane label="我管理的团队"></el-tab-pane>
                <el-tab-pane label="我加入的团队"></el-tab-pane>
            </el-tabs>
            <div class="btn-box">
                <el-button v-permission="'新增团队'" @click="$router.push('/data/team/add')">新增医生团队</el-button>
                <el-button>申请加入团队</el-button>
                <el-button>导出</el-button>
            </div>
        </div>
        <div class="select-box">
            <span class="span">所属机构</span>
            <el-select size="large" style="width: 240px;" placeholder="请选择" v-model="selectData.organizationId"
                clearable>
                <el-option v-for="item in AgencyData" :key="item._id" :label="item.name" :value="item._id" />
            </el-select>
            <div class="input-box">
                <input type="text" placeholder="请输入关键字" v-model="selectData.name">
                <img src="../../../assets/teamManage/u1347.png">
            </div>
        </div>
        <el-table :data="TeamData.rows" :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }" style="margin-top: 30px;">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="_id" label="编号" show-overflow-tooltip />
            <el-table-column label="头像">
                <template #default="{ row }">
                    <el-image v-if="row.avatar" :src="row.avatar" style="width: 50px; height: 50px;"></el-image>
                    <el-tag v-else round>未上传</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="团队名称" width="100px" />
            <el-table-column prop="leaderId.name" label="团队长" />
            <el-table-column label="团队标签" width="200px">
                <template #default="{ row }">
                    <el-tag v-if="row.tagIds.length > 0" v-for="(item, index) in row.tagIds" :key="index"
                        :type="getTagType(index)" round>{{ item.name }}</el-tag>
                    <el-tag v-else round>无</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="organizationId.name" label="所属机构" width="250px" />
            <el-table-column prop="signNumber" label="签约人数" />
            <el-table-column prop="rate" label="评分" width="60px" />
            <el-table-column label="状态">
                <template #default="{ row }">
                    <el-switch v-model="row.state" active-text="启用" inactive-text="禁用" :active-value="1"
                        :inactive-value="0" inline-prompt
                        style="--el-switch-on-color:#13ec66; --el-switch-off-color: #ccc"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180px">
                <template #default="{ row }">
                    <el-button type="primary" v-permission="'团队详情'" link @click="$router.push({
                        path: '/data/team/detail/:_id',
                        query: { _id: row._id }
                    })">查看详情</el-button>
                    <el-button type="danger" link @click="deleteTeam(row._id)">解散团队</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="flex-end" v-model:current-page="pageData.currentPage"
            v-model:page-size="pageData.pageSize" :page-sizes="[10, 20, 50, 100]" :background="true"
            layout="total, sizes, prev, pager, next, jumper" :total="TeamData.total" />
    </el-card>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from 'vue';
import { deleteTeamApi, findTeamsApi } from '../../../api/teamManage';
import { findAgencyApi } from '../../../api/agency';
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus';


onMounted(() => {
    findTeam(),
        findAgency()
})
//机构数据
const AgencyData = ref([])

//搜索数据
const selectData = ref({
    organizationId: '',
    name: ''
})
//表格数据
const TeamData = reactive({
    rows: [],
    total: 0
})
//分页数据
const pageData = ref({
    currentPage: 1,
    pageSize: 5
})
//侦听分页数据
watch([pageData, selectData], () => {
    findTeam()
}, { deep: true })

//查询机构方法
const findAgency = async () => {
    const res = await findAgencyApi()

    if (res.code == 200) {
        AgencyData.value = res.data.rows
    }
}
//查询团队方法
function findTeam() {
    findTeamsApi({
        ...pageData.value,
        ...selectData.value
    })
        .then((res) => {
            if (res.code == 200) {
                TeamData.rows = res.data.rows,
                    TeamData.total = res.data.total
            }
        })
}
//删除团队方法
function deleteTeam(id) {
    ElMessageBox.confirm(
        '该操作不可撤销，确认解散团队吗？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        // 调用删除API并传递医生ID
        return deleteTeamApi({ _id: id })
    }).then(res => {
        if (res.code === 200) {
            ElMessage.success('删除成功！')
            // 重新加载数据
            findTeam()
        } else {
            throw new Error('删除失败')
        }
    }).catch(err => {
        if (err.name !== 'Cancel') {
            console.error('删除失败：', err)
            ElMessage.error('已取消删除')
        }
    })
}
//定义标签颜色
function getTagType(index) {
    const types = ['danger', 'primary', 'warning',]; // Element UI 内置类型
    return types[index % types.length];
}


</script>

<style scoped lang="scss">
.tab-container {
    position: relative;
    margin-top: 20px;
}

.btn-box {
    position: absolute;
    top: 0;
    right: 0;


    .el-button {
        background-color: var(--el-color-primary);
        color: #fff;
    }
}

.select-box {
    display: flex;
    align-items: center;
}

.span {
    margin: 0 10px;
    font-size: 13px;
    color: #999999;
}

.input-box {
    width: 340px;
    height: 38px;
    border: 1px #ddd solid;
    border-radius: 4px;
    margin-left: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    input {
        border: none;
        margin-left: 20px;

        &::-webkit-input-placeholder {
            /* Chrome/Safari */
            color: #999;
            font-size: 14px;
        }
    }

    img {
        margin-right: 10px;
    }
}

.el-tag {
    padding: 0 5px;
}
</style>
